<div class="expanded-section">
  <div class="component-label hidden-xs">{{$ctrl.sectionTitle}}</div>
  <service-binding
    ng-repeat="binding in $ctrl.bindings track by (binding | uid)"
    is-overview="true"
    namespace="$ctrl.namespace"
    ref-api-object="$ctrl.refApiObject"
    binding="binding"
    service-classes="$ctrl.serviceClasses"
    service-instances="$ctrl.serviceInstances"
    secrets="$ctrl.secrets">
  </service-binding>
  <p ng-if="!$ctrl.refApiObject.metadata.deletionTimestamp && ($ctrl.bindableServiceInstances | size) && ({resource: 'servicebindings', group: 'servicecatalog.k8s.io'} | canI : 'create')">
    <a href="" ng-click="$ctrl.createBinding()" role="button">
      <span class="pficon pficon-add-circle-o" aria-hidden="true"></span>
      Create Binding
    </a>
  </p>
  <p ng-if="($ctrl.refApiObject.kind !== 'ServiceInstance')  && !($ctrl.bindableServiceInstances | size)">
    <span>You must have a bindable service in your namespace in order to create bindings.</span>
    <div>
      <a href="catalog">Browse Catalog</a>
    </div>
  </p>
</div>
